<template>
<div id="out33">
    <div class="top3">
		<a href="#/GeRenzx3"><img class="imgTop1" src="../assets/img/duanhuowang/zuojiantou.png" alt=""/></a>
		<span>我的心得</span>
		<img class="imgTop2" src="../assets/img/duanhuowang/huizhuan.png" alt=""/>
	</div>
	<div class="back"></div>
	<div class="middle3">
		<div class="tittlle">
			<span><img src="../assets/img/duanhuowang/huisetouxiang.png" alt=""/></span>
		    昵称
		</div>
		<p>光模块额鹅鹅鹅鹅鹅鹅呃呃鹅鹅鹅鹅鹅鹅额呃呃鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅</p>
	    <div class="shop1"><img src="../assets/img/duanhuowang/chuncai.png" alt=""/></div>
	    <p>8小时前</p>
	    <div class="xx1">
	    	    <img src="../assets/img/duanhuowang/chuncai.png" alt=""/>
	    	    <div>
	    	    	    <p class="tittlea">焕彩璀璨花心唇彩4.8g</p>
	    			<p>
	    				<span><img src="../assets/img/duanhuowang/yingguoqi.png" alt=""/></span>
	    				<img src="../assets/img/duanhuowang/huiji.png" alt=""/>
	    				海外直邮
	    			</p>
	    			<p class="pric">￥166.06</p>
	    	    </div>
	    </div>
	</div>
	<div class="bottom8">
		<p class="yonghu">用户评论 ( 10 )</p>
		<div class="tittle1">
			<span><img src="../assets/img/duanhuowang/huisetouxiang.png" alt=""/></span>
		    昵称
		    <div>刚刚</div>
		</div>
		<p>
			光模块的第三个第四个如何的点点滴滴多对对对对对对多多多反反复复付付
		</p>
		<div class="bottom9">
			<span>
				<img src="../assets/img/duanhuowang/dianzan.png" alt=""/>
				点赞
			</span>
			<div></div>
			<span>
				<img src="../assets/img/duanhuowang/pinglun.png" alt=""/>
				写评论
			</span>
			<div></div>
			<span>
				<img src="../assets/img/duanhuowang/fengxiang.png" alt=""/>
				分享
			</span>
		</div>
	</div>
</div>
</template>

<script>
	export default {
		name: '',
		methods: {
			round2: function() {
				
			},
		},
		mounted: function() {
			//只有在mounted之后，才可以执行dom操作，也就是说可以在这个方法里面执行那些需要加载立即执行的方法
			this.round2();
		},
	}
</script>

<style>
	#out33{
		background: #f2f2f2;
		height: 100vh;
		overflow: scroll;
	}
	#out33>.back{
		height: 9.6rem;
	}
	#out33>.top3 {
		width: 100vw;
		height: 9.6rem;
		background: #e53e42;
		color: white;
		display: flex;
		position: fixed;
		z-index: 10;
		align-items: center;
		text-align: center;
		justify-content: space-around;
	}
	#out33>.top3 .imgTop1 {
		width: 2.3rem;
		height: 3.8rem;
	}
	
	#out33>.top3>span {
		width: 37.6rem;
		height: 3.6rem;
		font-family: MicrosoftYaHei;
		font-size: 3.6rem;
		font-weight: normal;
		font-stretch: normal;
		line-height: 3.6rem;
		letter-spacing: 0px;
	}
	
	#out33>.top3>.imgTop2 {
		width: 3.6rem;
		height: 3.5rem;
	}
	#out33>.middle3{
		background: #FFFFFF;
		padding-bottom: 2rem;
	}
	#out33>.middle3>.tittlle{
		display: flex;
		align-items: center;
		justify-content: flex-start;
		font-size: 2.8rem;
		padding: 2rem;
		box-sizing: border-box;
		padding-bottom: 0;
	}
	#out33>.middle3>p{
		font-size: 2.4rem;
		color: #808080;
		padding: 2rem;
	}
	#out33>.middle3>.tittlle>span{
		width: 8rem;
		height: 8rem;
		border: 0.1rem solid #CCCCCC;
		border-radius: 50%;
		text-align: center;
		box-sizing: border-box;
		padding-top: 1rem;
		margin-right: 2rem;
	}
	#out33>.middle3>.tittlle>span>img{
		width: 4.4rem;
		height: 5rem;
	}
	#out33>.middle3>.shop1{
		width: 26rem;
		height: 20rem;
		border: 0.1rem solid #CCCCCC;
		text-align: center;
		box-sizing: border-box;
		padding-top: 3rem;
	}
	#out33>.middle3>.shop1>img{
		width: 6.2rem;
		height: 13.8rem;
	}
	#out33>.middle3>.xx1{
		width: 68rem;
		height: 16rem;
		border: 0.1rem solid #CCCCCC;
		margin-left: 2rem;
	}
	#out33>.middle3>.xx1>img{
		width: 6.2rem;
		height: 13.8rem;
		margin-bottom: 0.5rem;
		margin-left: 6rem;
	}
	#out33>.middle3>.xx1>div{
		display: inline-block;
		box-sizing: border-box;
		padding-top: 2rem;
		color: #4d4d4d;
		margin-left: 6rem;
		border-left: 0.1rem solid #CCCCCC;
		box-sizing: border-box;
		padding-left: 3rem;
	}
	#out33>.middle3>.xx1>div>p{
		display: flex;
		align-items: center;
		justify-content: flex-start;
		font-size: 2.4rem;
	}
	#out33>.middle3>.xx1>div>.tittlea{
		color: #4d4d4d;
		font-size: 2.8rem;
		padding-bottom: 3rem;
	}
	#out33>.middle3>.xx1>div>.pric{
		font-size: 3rem;
		color: #e53e42;
		padding-top: 2rem;
	}
	#out33>.middle3>.xx1>div>p>img{
		width: 3.4rem;
		height: 3.3rem;
		margin-right: 1.5rem;
	}
	#out33>.middle3>.xx1>div>p>span{
		width: 3rem;
		height: 2rem;
		border: 0.1rem solid #CCCCCC;
		text-align: center;
		font-size: 0;
		margin-right: 1.5rem;
	}
	#out33>.middle3>.xx1>div>p>span>img{
		width: 1.5rem;
		height: 1rem;
		margin-top: 0.5rem;
	}
	#out33>.bottom8{
		background: #FFFFFF;
		margin-top: 2rem;
	}
	#out33>.bottom8>.tittle1{
		display: flex;
		align-items: center;
		justify-content: flex-start;
		font-size: 2.8rem;
		padding: 2rem;
		box-sizing: border-box;
		padding-bottom: 0;
	}
	#out33>.bottom8>.tittle1>span{
		width: 8rem;
		height: 8rem;
		border: 0.1rem solid #CCCCCC;
		border-radius: 50%;
		text-align: center;
		box-sizing: border-box;
		padding-top: 1rem;
		margin-right: 2rem;
	}
	#out33>.bottom8>.tittle1>span>img{
		width: 4.4rem;
		height: 5rem;
	}
	#out33>.bottom8>.tittle1>div{
		font-size: 2rem;
		color: #808080;
		transform: translate(-5rem,3rem);
	}
	#out33>.bottom8>.yonghu{
		color: #333333;
		font-size: 2.8rem;
		padding: 2rem;
		border-bottom: 0.1rem solid #CCCCCC;
	}
	#out33>.bottom8>p{
		padding: 2rem;
		color: #808080;
		font-size: 2.4rem;
	}
	#out33>.bottom8>.bottom9{
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 4rem;
		border-top: 0.1rem solid #CCCCCC;
		padding: 1rem 0;
	}
	#out33>.bottom8>.bottom9>span{
		display: flex;
		align-items: center;
		justify-content: space-around;
		flex-direction: column;
		font-size: 2.4rem;
		width: 23.8rem;
	}
	#out33>.bottom8>.bottom9>span>img{
		margin-bottom: 1rem;
		width: 2.4rem;
		height: 2.3rem;
	}
	#out33>.bottom8>.bottom9>div{
		width: 0.2rem;
		height: 4rem;
		background: #CCCCCC;
	}
</style>